<!--
This source code is licensed under the terms of the
GNU Affero General Public License found in the LICENSE file in
the root directory of this source tree.

Copyright (c) 2021-present Kaleidos INC
-->

<div class="nav-wrapper">
  <div class="nav-inner">
    <h1
      (mouseenter)="popup($event, 'project')"
      (mouseleave)="out()">
      <a
        class="project-link"
        [routerLink]="[baseHref, 'project', project.slug, 'timeline']"
        [attr.title]="project.name">
        <img
          width="24"
          logo="small"
          [tgProjectLogo]="project"
          [alt]="project.name" />
        <span class="menu-option-text project-name" data-animation="text">
          {{ project.name }}
        </span>
      </a>
    </h1>

    <ul class="main-menu">
      @if (isMenuEpicsEnabled) {
        <li
          class="menu-option"
          [class.active]="section === 'epics'"
          [class.active-dialog]="dialog.type === 'epics'"
          (mouseenter)="popup($event, 'epics')"
          (mouseleave)="out()">
          <a
            [routerLink]="[baseHref, 'project', project.slug, 'epics']"
            title="{{'PROJECT.SECTION.EPICS' | translate}}">
            <svg>
              <use href="#epic" />
            </svg>
            <span class="menu-option-text" data-animation="text">
              {{'PROJECT.SECTION.EPICS' | translate}}
            </span>
          </a>
        </li>
      }
      @if (isMenuScrumEnabled) {
        <li
          class="menu-option scrum"
          routerLinkActive="active"
          [class.active]="scrumVisible"
          [class.active-dialog]="dialog.type === 'scrum' || (section === 'backlog' && scrumVisible)"
          (mouseenter)="popupScrum($event)"
          (mouseleave)="out()">
          <button
            (click)="toggleScrum()"
            type="button"
            title="{{'PROJECT.SECTION.SCRUM' | translate}}">
            <svg>
              <use href="#agile" />
            </svg>
            <span class="menu-option-text" data-animation="text">
              {{'PROJECT.SECTION.SCRUM' | translate}}
            </span>
            <svg class="agile-chevron" data-animation="text">
              <use href="#chevron-left" />
            </svg>
          </button>
          <ul class="child-menu" *ngrxLet="milestoneId$ as milestoneId">
            <li class="menu-option">
              <a
                [class.active]="milestoneId === null"
                [routerLink]="[baseHref, 'project', project.slug, 'backlog']"
                routerLinkActive="active"
                title="{{'PROJECT.SECTION.BACKLOG' | translate}}">
                <span class="menu-option-text" data-animation="text">
                  {{'PROJECT.SECTION.BACKLOG' | translate}}
                </span>
              </a>
            </li>
            @for (milestone of milestones; track milestone) {
              <li class="menu-option">
                <a
                  [class.active]="milestone.id === milestoneId"
                  [routerLink]="[baseHref, 'project', project.slug, 'taskboard', milestone.slug]"
                  routerLinkActive="active"
                  [attr.title]="milestone.name">
                  <span class="menu-option-text" data-animation="text">
                    {{ milestone.name }}
                  </span>
                </a>
              </li>
            }
          </ul>
        </li>
      }
      @if (isMenuKanbanEnabled) {
        <li
          class="menu-option"
          [class.active]="section === 'kanban'"
          [class.active-dialog]="dialog.type === 'kanban'"
          (mouseenter)="popup($event, 'kanban')"
          (mouseleave)="out()">
          <a
            [routerLink]="[baseHref, 'project', project.slug, 'kanban']"
            title="{{'PROJECT.SECTION.KANBAN' | translate}}">
            <svg>
              <use href="#kanban5" />
            </svg>
            <span class="menu-option-text" data-animation="text">
              {{'PROJECT.SECTION.KANBAN' | translate}}
            </span>
          </a>
        </li>
      }
      @if (isMenuIssuesEnabled) {
        <li
          class="menu-option"
          [class.active]="section === 'issues'"
          [class.active-dialog]="dialog.type === 'issues'"
          (mouseenter)="popup($event, 'issues')"
          (mouseleave)="out()">
          <a
            [routerLink]="[baseHref, 'project', project.slug, 'issues']"
            title="{{'PROJECT.SECTION.ISSUES' | translate}}">
            <svg>
              <use href="#issue" />
            </svg>
            <span class="menu-option-text" data-animation="text">
              {{'PROJECT.SECTION.ISSUES' | translate}}
            </span>
          </a>
        </li>
      }
    </ul>

    <ul class="menu-secondary main-menu">
      <li
        class="menu-option"
        [class.active-dialog]="dialog.type === 'search'"
        (mouseenter)="popup($event, 'searchEvt')"
        (mouseleave)="out()">
        <button
          (click)="searchEvt.emit()"
          title="{{'PROJECT.SECTION.SEARCH' | translate}}"
          type="button">
          <svg>
            <use href="#search" />
          </svg>
          <span class="menu-option-text" data-animation="text">
            {{'PROJECT.SECTION.SEARCH' | translate}}
          </span>
        </button>
      </li>
      @if (videoUrl) {
        <li
          class="menu-option"
          [class.active-dialog]="dialog.type === 'video'"
          (mouseenter)="popup($event, 'video')"
          (mouseleave)="out()">
          <a
            [href]="videoUrl"
            title="{{'PROJECT.SECTION.MEETUP' | translate}}"
            target="_blank">
            <svg>
              <use href="#video" />
            </svg>
            <span class="menu-option-text" data-animation="text">
              {{'PROJECT.SECTION.MEETUP' | translate}}
            </span>
          </a>
        </li>
      }
      @if (isMenuWikiEnabled) {
        <li
          class="menu-option"
          [class.active]="section === 'wiki'"
          [class.active-dialog]="dialog.type === 'wiki'"
          (mouseenter)="popup($event, 'wiki')"
          (mouseleave)="out()">
          <a
            [routerLink]="[baseHref, 'project', project.slug, 'wiki']"
            title="{{'PROJECT.SECTION.WIKI' | translate}}">
            <svg>
              <use href="#book" />
            </svg>
            <span class="menu-option-text" data-animation="text">
              {{'PROJECT.SECTION.WIKI' | translate}}
            </span>
          </a>
        </li>
      }
      <li
        class="menu-option"
        [class.active]="section === 'team'"
        [class.active-dialog]="dialog.type === 'team'"
        (mouseenter)="popup($event, 'team')"
        (mouseleave)="out()">
        <a
          [routerLink]="[baseHref, 'project', project.slug, 'team']"
          title="{{'PROJECT.SECTION.TEAM' | translate}}">
          <svg>
            <use href="#users" />
          </svg>
          <span class="menu-option-text" data-animation="text">
            {{'PROJECT.SECTION.TEAM' | translate}}
          </span>
        </a>
      </li>
      @if (project.iAmAdmin) {
        <li
          class="menu-option"
          [class.active]="section === 'admin'"
          [class.active-dialog]="dialog.type === 'settings'"
          (mouseenter)="popup($event, 'settings')"
          (mouseleave)="out()">
          <a
            [routerLink]="[baseHref, 'project', project.slug, 'admin', 'project-profile', 'details']"
            title="{{'PROJECT.SECTION.SETTINGS' | translate}}">
            <svg>
              <use href="#settings" />
            </svg>
            <span class="menu-option-text" data-animation="text">
              {{'PROJECT.SECTION.SETTINGS' | translate}}
            </span>
          </a>
        </li>
      }
    </ul>

    <button
      type="button"
      class="collapse"
      [class.collapsed]="collapseText"
      (click)="toggleCollapse()">
      @if (!collapseText) {
        <span data-animation="text">
          {{'PROJECT.SECTION.COLLAPSE_MENU' | translate}}
        </span>
      }
      <svg>
        <use href="#chevrons-left" />
      </svg>
    </button>
  </div>
</div>

<div
  (mouseenter)="enterDialog()"
  (mouseleave)="outDialog()"
  class="dialog"
  [class.open]="dialog.open"
  [style.top.px]="dialog.top"
  [style.left.px]="dialog.left">
  <div class="dialog-main menu-option">
    @if (dialog.slug && dialog.type !== 'scrum') {
      <a
        [href]="dialog.slug"
        [style.height.px]="dialog.mainLinkHeight"
        class="main-link">
        <span class="dialog-text">
          {{ dialog.text }}
        </span>
      </a>
    }
    @if (dialog.type === 'scrum') {
      <div
        [style.height.px]="dialog.mainLinkHeight"
        class="main-link">
        <span class="dialog-text">
          {{ dialog.text }}
        </span>
      </div>
    }

    @if (dialog.type === 'search') {
      <button
        class="main-link"
        (click)="search.emit()"
        title="{{'PROJECT.SECTION.SEARCH' | translate}}"
        type="button">
        {{'PROJECT.SECTION.SEARCH' | translate}}
      </button>
    }
  </div>
  @if (dialog.children.length) {
    <ul class="child-menu">
      @for (child of dialog.children; track child) {
        <li class="menu-option">
          <a
            [routerLink]="child.link"
            routerLinkActive="active"
            [attr.title]="child.text">
            <span class="menu-option-text">
              {{ child.text }}
            </span>
          </a>
        </li>
      }
    </ul>
  }
</div>
